<template>
  <div>
      <!-- v-pre:跳过vue编译 -->
      <h2 v-pre>{{ count }}</h2>

      <!-- v-once:仅编译一次 -->
      <h2 v-once>{{ count }}</h2>
      <button @click="count++">count++</button>

      <!-- 解决DOM模板闪现问题 -->
      <div v-cloak>
          <div>{{ title }}</div>
      </div>

      <!-- v-memo:用来优化v-for的海量数据 -->
      <ul v-memo="[count]">
          <li v-for="user in users">{{ user }}</li>
      </ul>
      <button @click="addUser">添加用户</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const count = ref(1)
const title = ref('hello')

const users = ref(['小李', '小罗', '小猪'])
const addUser = () => {
  users.value.push('小强')
}
</script>

<style  scoped>
[v-cloak] {
  display: none;
}
</style>